<!DOCTYPE html>
<html>
<head>
	<include file="Public:common-css" />
	<link type="text/css" rel="stylesheet" href="__ICSS__/member.css" />
	<link href="__ICSS__/validform/validform.css" rel="stylesheet">
	<style>
		html{ background:#fff;}
	</style>
</head>
<body>
<div class="container">
<!-------------------------header--------------------------------->
<!--------------------------content------------------------------->
	<div class="member-content member-address-box">
		<form action="__ROOT__/User/insertAddress" method="post" class="form">
			<input type="hidden" name="mail_type" value="1" />
			<div class="member-form-item">
				<em>配送方式：</em>
				<div class="member-item">
					<div class="type-box">
						<span class="on" ref="1">校园直达</span>
						<span ref="2">快递配送</span>
					</div>
				</div>
			</div>
			<div class="member-form-item">
				<em>姓名：</em>
				<div class="member-item">
					<input type="text" class="member-form-input" placeholder="请输入您的姓名" datatype="*" name="contact_name"/>
					<span class="Validform_checktip"></span>
				</div>
			</div>
			<div class="member-form-item">
				<em>手机号码：</em>
				<div class="member-item">
					<input type="text" class="member-form-input" placeholder="请输入您的手机号码" datatype="m" name="contact_tel"/>
					<span class="Validform_checktip"></span>
				</div>
			</div>
			<div class="member-form-item school-box">
				<em>学校：</em>
				<div class="member-item">
					<select class="member-form-select school-select" datatype="*" name="school_id">
						<option value="">请选择</option>
						<foreach item="sch" name="schoolList">
							<option value="<{$sch.id}>" ref="<{$sch.province}>_<{$sch.city}>_<{$sch.area}>"><{$sch.name}></option>
						</foreach>
					</select>
					<span class="Validform_checktip"></span>
				</div>
			</div>
			<div class="member-form-item province-box">
				<em>省市区：</em>
				<div class="member-item">
					<select class="member-form-select province-select" datatype="*" name="province">
						<option value="">请选择</option>
					</select>
					<select class="member-form-select city-select" datatype="*" name="city">
						<option value="">请选择</option>
					</select>
					<select class="member-form-select district-select" datatype="*" name="area">
						<option value="">请选择</option>
					</select>
					<span class="Validform_checktip"></span>
				</div>
			</div>
			<div class="member-form-item">
				<em>详细地址：</em>
				<div class="member-item">
					<input type="text" class="member-form-input" placeholder="请补充详细地址" datatype="*" name="address"/>
					<span class="Validform_checktip"></span>
				</div>
			</div>
			<div class="member-form-item">
				<em></em>
				<div class="member-item">
					<input type="button" class="member-form-submit" value="确认"/>
					<button type="reset" id="reset2" class="hide btn btn-success btn-block">重置</button>
				</div>
			</div>
		</form>
	</div>
<!--------------------------content-end--------------------------->
</div>

</body>
<include file="Public:common-js" />
<script src="__IJS__/Validform_v5.3.2_min.js"></script>
<script type="text/javascript">
$(function(){
	//省市区联动
	var data = <{$cityList}>;
	$.each(data, function (k, p) { 
        var option = "<option value='" + p.province + "' ref='" + k+ "'>" + p.province + "</option>";
        $(".province-select").append(option);
    });
	$(".province-select").change(function () {
        var key = $(this).find("option:selected").attr("ref"); 
        $(".city-select option:gt(0)").remove();
        $(".district-select option:gt(0)").remove(); 
        $.each(data[key]['cityList'], function (k, p) { 
	        var option = "<option value='" + p.city + "' ref='" + key+ "' subref='" + k+ "'>" + p.city + "</option>";
	        $(".city-select").append(option);
        });
    });
	$(".city-select").change(function () {
        var key = $(this).find("option:selected").attr("ref");
        var subkey = $(this).find("option:selected").attr("subref");
        $(".district-select option:gt(0)").remove(); 

        $.each(data[key]['cityList'][subkey]['areaList'], function (k, p) {
                var option = "<option value='" + p.area + "'>" + p.area + "</option>";
                $(".district-select").append(option);
        }); 
    }); 
	//选择学校
	$(".school-select").change(function(){
		var area = $(this).find("option:selected").attr("ref");
		area = area.split("_");
		$(".province-select").find("option:contains('" + area[0] + "')").attr("selected",true);
		$(".province-select").trigger("change");
		$(".city-select").find("option:contains('" + area[1] + "')").attr("selected",true);
		$(".city-select").trigger("change");
		$(".district-select").find("option:contains('" + area[2] + "')").attr("selected",true);
	})
	$("#reset2").click();
	resetType(1);
	$(".member-form-submit").click(function() {
		$(".form").submit();
		$(this).attr("disabled","disabled");
	})
	var form = $(".form").Validform({
		tiptype:4,
		ajaxPost:true,
		callback:function(data){
			if(data.status == 1) {
				layer.msg(data.info);
				window.parent.location.reload();
			}else{
				layer.msg(data.info);
			}
		}
	});
	$(".type-box").find("span").click(function() {
		$(".type-box").find("span").attr("class","");
		$(this).attr("class","on");
		resetType($(this).attr("ref"));
	})
	
	function resetType(type){
		if(type == 1){//学校
			$(".province-box").hide();
			
			$(".school-box").show();
			$(".school-box").find("select").attr("datatype","*");
			$(".school-box").find("select").removeAttr("disabled");
		}else if(type == 2){//快递
			$(".province-box").show();
			$(".province-box").find("select").attr("datatype","*");
			$(".province-box").find("select").removeAttr("disabled");
			
			$(".school-box").hide();
			$(".school-box").find("select").removeAttr("datatype");
			$(".school-box").find("select").attr("disabled","disabled");
		}
		$("input[name='mail_type']").val(type);
	}
	
})
</script>
</html>
